<script setup lang="ts">
import Table from "@/components/table/index.vue";
import { TableColumn } from "@/components/table/type";
import { onMounted, ref } from "vue";
import { useDevStoreWithOut } from "@/store/modules/dev";
import TitelBar from "@/components/titelBar/index.vue";
import type { devicesFace, tasksFace } from "@/types/tasks"
import { getList } from "@/api/tasks"
import { SendData } from "@/api/dev"
import { ElMessage } from "element-plus";
const store = useDevStoreWithOut();
const column = ref<TableColumn[]>([
    {
        label: "设备id",
        prop: "accountId",
    },
    {
        label: "正在执行任务",
        prop: "taskId",
    },
    {
        label: "设备名称",
        prop: "_slot:deviceInfo",
    },
    {
        label: "操作",
        prop: "_slot:operation",
    },
]);
const query = ref({
    keyword: ''
})
const btns = ref([])
const actions = ref([])
const taskListData = ref<tasksFace[]>([])
const checkAll = ref(false)
const indeterminate = ref(false)
const value = ref<number[]>([])
const handelchangeSize = (e: any) => {
    store.setPageSize(e);
};
const handekcurrentChange = (e: any) => {
    store.setPage(e);
};
const changeValue = (e) => {
    if (!e) return
    query.value.keyword = e
    store.setQuerys(query.value)
}
const refresh = () => {
    store.refresh();
    store.LoadList();
}
const btnEvent = (key) => {
    switch (key) {
        case 'add':
            // addItem()
            break;
        case 'remove':
            // remove()
            break;

        default:
            break;
    }
}
const handleCheckAll = (v: boolean) => {
    indeterminate.value = false
    if (v) {
        value.value = taskListData.value.map(e => e.id)
    } else {
        value.value = []
    }
}
const sendScript = (item: devicesFace) => {
    if (value.value.length === 0) {
        ElMessage.error("请选择任务")
        return
    }
    const mesg = {
        type: 104,
        taskId: value.value[0],
        accountId: item.accountId
    }
    SendData(mesg)

}
const getTaskList = async () => {
    const res: {
        list: tasksFace[],
        total: number,
    } = await getList()
    if (res.list) {
        taskListData.value = res.list
    }
}
onMounted(() => {
    store.LoadList();
    getTaskList()
});
</script>
<template>
    <div style="height: 100%;">
        <TitelBar :buttons="btns" :actions="actions" @changeValue="changeValue" @refresh="refresh" @btnEvent="btnEvent">

            <template #left>
                <el-select v-model="value" multiple clearable collapse-tags placeholder="请选择执行的任务"
                    popper-class="custom-header" :max-collapse-tags="1" style="width: 240px">
                    <template #header>
                        <el-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
                            全选
                        </el-checkbox>
                    </template>
                    <el-option v-for="item in taskListData" :key="item.id" :label="item.taskName" :value="item.id" />
                </el-select>
            </template>
        </TitelBar>
        <Table :data="store.getList" :column="column" :page="store.getPage" :pageSize="store.pageSize"
            :total="store.total" v-loading="store.getLoding" height="calc(100vh - 220px)" @sizeChange="handelchangeSize"
            @currentChange="handekcurrentChange">
            <template #deviceInfo="{ scope }">
                <el-text class="mx-1" type="danger">{{ scope.deviceInfo.model }}</el-text>
            </template>
            <template #operation="{ scope }">
                <el-button type="primary" link @click="sendScript(scope)">执行</el-button>
                <!--<el-button v-if="!props.ischildren" type="primary" link @click="handelmodiu(scope)">编辑</el-button>
                <el-popconfirm v-if="!props.ischildren" width="300px" title="确定要删除吗?删除后将无法恢复！"
                    @confirm="handelremove(scope)">
                    <template #reference>
                        <el-button type="danger" link>删除</el-button>
                    </template>
    </el-popconfirm> -->

            </template>
        </Table>
    </div>
</template>

<style scoped lang="scss"></style>
